<template>
  <view class="register">
    <view class="registerform">
      <input type="text" v-model="rName" placeholder="请输入用户名" />
      <input type="text" v-model="rUser" placeholder="请输入账号" />
      <input type="password" v-model="rPwd" placeholder="请输入密码" />
      <input type="password" v-model="rPwds" placeholder="请确认密码" />
    </view>
    <view class="usertext">

      <checkbox-group @change="checkboxChange">
        <label>
          <checkbox value="1" :checked="items.checked" />
        </label>
        <!-- <text>同意并遵守<text class="usertext-text" @click="togglePopup('xieyi')">用户协议</text></text> -->
        
        <view style="display: inline-block;">同意并遵守<text class="usertext-text" @click="togglePopup('xieyi')">用户协议</text></view>
      </checkbox-group>
    </view>

    <view class="registerbtn">
      <navigator url="../login"><button>返回</button></navigator>
      <button @click="confirmRegister">确定</button>
    </view>
    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>


    <uni-popup :show="type === 'xieyi'" position="middle" mode="fixed" @hidePopup="togglePopup('')">
      <view class="xieyi">
        <view style="text-align: center;">
          《用户协议和法律协议》
        </view>
        <view class="xieyiduanluo">本协议为您与本APP管理者之间所订立的契约，具有合同的法律效力，请您仔细阅读。</view>
        <view class="xieyititle">一、 本协议内容、生效、变更</view>
        <view class="xieyiduanluo">
          本协议内容包括协议正文及所有本APP已经发布的或将来可能发布的各类规则。所有规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。
          如您对协议有任何疑问，应向本APP咨询。您在同意所有协议条款并完成注册程序，才能成为本站的正式用户，您点击“我以阅读并同意本APP用户协议
          和法律协议”按钮后，本协议即生效，对双方产生约束力。
        </view>
        <view class="xieyiduanluo">
          本协议内容包括协议正文及所有本APP已经发布的或将来可能发布的各类规则。所有规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。如您对协议有任何疑问，应向本APP咨询。您在同意所有协议条款并完成注册程序，才能成为本站的正式用户，您点击“我以阅读并同意本APP用户协议和法律协议”按钮后，本协议即生效，对双方产生约束力。
          只要您使用本APP平台服务，则本协议即对您产生约束，届时您不应以未阅读本协议的内容或者未获得本APP对您问询的解答等理由，主张本协议无效，
          或要求撤销本协议。您确认：本协议条款是处理双方权利义务的契约，始终有效，法律另有强制性规定或双方另有特别约定的，依其规定。 您承诺接受
          并遵守本协议的约定。如果您不同意本协议的约定，您应立即停止注册程序或停止使用本APP平台服务。本APP有权根据需要不定期地制订、修改本协议
          及/或各类规则，并在本APP平台公示，不再另行单独通知用户。变更后的协议和规则一经在网站公布，立即生效。如您不同意相关变更，应当立即停止
          使用本APP平台服务。您继续使用本APP平台服务的，即表明您接受修订后的协议和规则。
        </view>
        <view class="xieyititle">
          二、 注册
        </view>
        <view class="xieyiduanluo">
          注册资格用户须具有法定的相应权利能力和行为能力的自然人、法人或其他组织，能够独立承担法律责任。您完成注册程序或其他本APP平台同意的方式实际使用本平台服务时，即视为您确认自己具备主体资格，能够独立承担法律责任。若因您不具备主体资格，而导致的一切后果，由您及您的监护人自行承担。
        </view>
        <view class="xieyititle">
          注册资料
        </view>
        <view class="xieyiduanluo">
          2.1用户应自行诚信向本站提供注册资料，用户同意其提供的注册资料真实、准确、完整、合法有效，用户注册资料如有变动的，应及时更新其注册资料。如果用户提供的注册资料不合法、不真实、不准确、不详尽的，用户需承担因此引起的相应责任及后果，并且本APP保留终止用户使用本平台各项服务的权利。

        </view>
        <view class="xieyiduanluo">
          2.2用户在本站进行浏览等活动时，涉及用户真实姓名/名称、通信地址、联系电话、电子邮箱等隐私信息的，本站将予以严格保密，除非得到用户的授权或法律另有规定，本站不会向外界披露用户隐私信息。

        </view>
        <view class="xieyititle">
          账户
        </view>
        <view class="xieyiduanluo">
          3.1您注册成功后，即成为本APP平台的会员，将持有本APP平台唯一编号的账户信息，您可以根据本站规定改变您的密码。

        </view>
        <view class="xieyiduanluo">
          3.2您设置的姓名为真实姓名，不得侵犯或涉嫌侵犯他人合法权益。否则，本APP有权终止向您提供服务，注销您的账户。账户注销后，相应的会员名将开放给任意用户注册登记使用。

        </view>
        <view class="xieyiduanluo">
          3.2您设置的姓名为真实姓名，不得侵犯或涉嫌侵犯他人合法权益。否则，本APP有权终止向您提供服务，注销您的账户。账户注销后，相应的会员名将开放给任意用户注册登记使用。

        </view>
        <view class="xieyiduanluo">
          3.3您应谨慎合理的保存、使用您的会员名和密码，应对通过您的会员名和密码实施的行为负责。除非有法律规定或司法裁定，且征得本APP的同意，否则，会员名和密码不得以任何方式转让、赠与或继承（与账户相关的财产权益除外）。

        </view>
        <view class="xieyiduanluo">
          3.4用户不得将在本站注册获得的账户借给他人使用，否则用户应承担由此产生的全部责任，并与实际使用人承担连带责任。

        </view>
        <view class="xieyiduanluo">
          3.5如果发现任何非法使用等可能危及您的账户安全的情形时，您应当立即以有效方式通知本APP要求暂停相关服务，并向公安机关报案。您理解本APP对您的请求采取行动需要合理时间，本APP对在采取行动前已经产生的后果（包括但不限于您的任何损失）不承担任何责任。
        </view>
        <view class="xieyititle">
          用户信息的合理使用
        </view>
        <view class="xieyiduanluo">
          4.1您同意本APP平台拥有通过邮件、短信电话等形式，向在本站注册用户发送信息等告知信息的权利。

        </view>
        <view class="xieyiduanluo">
          4.2您了解并同意，本APP有权应国家司法、行政等主管部门的要求，向其提供您在本APP平台填写的注册信息和交易记录等必要信息。如您涉嫌侵犯他人知识产权，则本APP亦有权在初步判断涉嫌侵权行为存在的情况下，向权利人提供您必要的身份信息。

        </view>
        <view class="xieyiduanluo">
          4.3用户同意本APP有权使用用户的注册信息、用户名、密码等信息，登陆进入用户的注册账户，进行证据保全，包括但不限于公证、见证等。

        </view>
      </view>

    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        type: '',
        rName: '',
        rUser: '',
        rPwd: '',
        rPwds: '',
        isChoice: '',
        items: {
          value: '1',
          checked: false
        },
      }
    },
    created() {
      
    },
    methods: {
      showXieyi(){
        this.togglePopup('xieyi');
      },
      checkboxChange(e) {
        this.isChoice = e.detail.value;
      },
      confirmRegister: function() {
        
        if(this.isChoice.length < 1){
          this.msg = '请阅读用户协议并选中！';
          this.togglePopup('middle');
          return false;
        }

        if (this.rName == '') {
          this.msg = '错误！请输入用户名';
          this.togglePopup('middle');
          return false;
        } else if (this.rUser == '') {
          this.msg = '错误！请输入账号';
          this.togglePopup('middle');
          return false;
        } else if (this.rPwd == '') {
          this.msg = '错误！请输入密码';
          this.togglePopup('middle');
          return false;
        } else if (this.rPwds == '') {
          this.msg = '错误！请输入确认密码';
          this.togglePopup('middle');
          return false;
        }

        if (this.rPwd != this.rPwds) {
          this.msg = '错误！两次密码输入不一致';
          this.togglePopup('middle');
          return false;
        }

        uni.request({
          method: 'POST',
          url: this.apiUrl + 'api/Login/SignUp', //仅为示例，并非真实接口地址。
          data: {
            UserName: this.rName,
            UserCode: this.rUser,
            Password: this.rPwd,
          },
          success: res => {
            if (res.data.state == 'success') {
              this.msg = '注册成功';
              this.togglePopup('middle');
              this.popupVisible = false;

              setTimeout(() => {
                uni.reLaunch({
                  url: '../login'
                });
              }, 1000)

            } else {
              this.msg = '注册失败，请稍后重试';
              this.togglePopup('middle');
              this.popupVisible = false;
            }

          }
        });
      },
    }
  }
</script>

<style scoped>
  .register {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .registerform {
    width: 700upx;
    margin: 200upx auto 0 auto;
  }

  .usertext {
    width: 600upx;
    margin: -30upx auto 20upx auto;
  }

  .usertext .usertext-text {
    margin-left: 10upx;
    color: #FFFFFF;
  }

  .registerform input {
    padding-left: 40upx;
    width: 560upx;
    height: 100upx;
    line-height: 100upx;
    background-color: #FFFFFF;
    margin: 0 auto 60upx auto;
    border-radius: 5px;
  }

  .registerbtn {
    width: 700upx;
    margin: 0upx auto 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .registerbtn button {
    width: 200upx;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
  }

  .registerbtn button:nth-child(1n) {
    width: 200upx;
    background-color: #F4BD00;
    margin-left: 30upx;
  }

  .registerbtn button:nth-child(2n) {
    width: 400upx;
    background-color: #23CCBE;
  }

  .registerform uni-input input {
    text-indent: 20px !important;
  }

  .registerform wx-input input {
    text-indent: 20px !important;
  }

  .xieyi {
    width: 600upx;
    height: 1000upx;
    background-color: #FFFFFF;
    overflow-y: scroll;
  }
  .xieyititle{
    font-weight: bold;
    text-indent: 36upx;
  }
  .xieyiduanluo{
    text-indent: 36upx;
  }
</style>
